<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增地址</title>
  <link rel="stylesheet" href="./css/webbase.css">
  <link rel="stylesheet" href="./css/pages-addAddress.css">
</head>
<body>
<div class="top-bar">
</div>
<div id="app">
  <top></top>
  <div class="cart py-container">
    <div class="logoArea">
      <a href="/"><img src="./img/logo.png" alt=""></a>
      <span>新增地址</span>
    </div>

    <div class="add-address">
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label for="province">省份</label>
          <input type="text" id="province" v-model="address.province" required>
        </div>
        <div class="form-group">
          <label for="city">城市</label>
          <input type="text" id="city" v-model="address.city" required>
        </div>
        <div class="form-group">
          <label for="town">区/县</label>
          <input type="text" id="town" v-model="address.town" required>
        </div>
        <div class="form-group">
          <label for="mobile">手机号</label>
          <input type="text" id="mobile" v-model="address.mobile" required>
        </div>
        <div class="form-group">
          <label for="street">详细地址</label>
          <input type="text" id="street" v-model="address.street" required>
        </div>
        <div class="form-group">
          <label for="contact">联系人</label>
          <input type="text" id="contact" v-model="address.contact" required>
        </div>
        <div class="form-group">
          <label for="isDefault">是否默认地址</label>
          <input type="checkbox" id="isDefault" v-model="address.isDefault">
        </div>
        <button type="submit">保存地址</button>
      </form>
    </div>
  </div>
</div>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/top.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      address: {
        userId: 1, // 假设用户ID为1
        province: '',
        city: '',
        town: '',
        mobile: '',
        street: '',
        contact: '',
        isDefault: false,
        notes: ''
      }
    },
    methods: {
      submitForm() {
        this.address.isDefault = Number(this.address.isDefault);
        axios.post('/addresses', this.address)
                .then(() => {
                  alert('地址保存成功');
                  location.href = '/order-confirm.html.'; // 跳转到我的地址页面
                })
                .catch(err => {
                  console.error('保存地址失败:', err);
                  alert('保存地址失败，请重试');
                });
      }
    }
  });
</script>
</body>
</html>